<template>
	<div class="boa">
		<Head title="商企库">
			<img src="../../../assets/11.png" alt="" />
		</Head>
		<!-- 版心区域 -->
		<div class="center">
			<!-- 商企库区域 -->
			<div class="top">
				<!-- 文字区域 -->
				<div class="wen"></div>
				<!-- 用户单位文字区域 -->
				<div class="umit">
					<div
						class="xiao"
						v-for="(item, index) in title"
						:key="index"
						@click="shangqiku(item.ceId)"
					>
						<div class="left">
							<img src="../../../assets/icon_column.png" alt="" />
						</div>
						<div
							class="zhong"
							:class="['zhong', item.ceId == ID ? 'active' : '']"
						>
							{{ item.ceName }}
						</div>
					</div>
				</div>
			</div>

			<div class="umitwo" v-cloak>
				<h3>{{ text }}</h3>
				<div class="text richText" v-html="list"></div>
			</div>
		</div>
	</div>
</template>
  
  <script>
import Head from "@/components/public/HeadPage.vue"
import { discusslist, discusspro } from "@/api/index"
export default {
	data() {
		return {

			title: "",
			text: "",
			list: [],
			ID: this.$route.query.id
		}
	},
	components: {
		Head
	},
	methods: {
		shangqiku(id) {
			if (id == "e97ad9e4-fb5f-4a43-93bc-784ae43089da") {
				this.$router.push({ path: "/commpage" })
			} else if (id == "0069b7d8-2a44-49d8-a2b4-024e3fb1d054") {
				this.$router.push({ path: "/shangthree", query: { id } })
			} else if (id == "2237fb14-3a99-4b00-8f72-b3d960eb3bdd") {
				this.$router.push({ path: "/shangfour", query: { id } })
			} else {
				this.$router.push({ path: "/shangnew", query: { id } })
			}

		}
	},

	mounted() {
		discusslist().then(res => {
			if (res.data.code == 200) {
				this.title = res.data.rows
			}
		}),
			discusspro(this.ID).then(res => {
				if (res.data.code == 200) {
					this.text = res.data.data.ceName
					this.list = this.dataHTML(res.data.data.ceContent)
				}
			})

	}
}
  </script>
  
  <style scoped>
.boa {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
[v-cloak] {
	display: none;
}

/* 版心区域 */
.center {
	width: 98%;
}
/* 大项目总区域 */
.top {
	width: 100%;
}
/* 图标区域 */
.top h3 img {
	width: 0.24rem;
	margin-right: 0.05rem;
}
.wen {
	width: 100%;
	height: 25%;
	display: flex;
	justify-content: center;
}
.xian {
	width: 98%;
	height: 100%;
	display: flex;
}

/* 用人单位区域 */
.umit {
	width: 100%;
	min-height: 0.4rem;
	margin-top: 0.1rem;
	border-bottom: 2px solid #dad9df;
}
.umitwo {
	width: 100%;
	min-height: 0.4rem;
}
.umitwo h3 {
	width: 100%;
	font-size: 0.2rem;
	text-align: center;
}
.xiao {
	width: 100%;
	margin-top: 0.05rem;
	display: flex;
}
/* 左边区域 */
.xiao .left {
	width: 5%;
	height: 100%;
	margin-left: 0.1rem;
}
.xiao .left img {
	width: 0.07rem;
	height: 0.3rem;
}
/* 中间区域 */
.zhong {
	height: 100%;
	line-height: 0.3rem;

	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
/* 文字区域 */
.text {
	margin-top: 0.05rem;
	font-weight: 700;
	text-indent: 0.1rem;
}

/* 下划线的设置 */
.zhong.activ {
	border-bottom: 2px solid #000;
}
</style>